import {defineComponent, h, onMounted,onUnmounted, reactive} from '@vue/runtime-core'
import Map from '../components/Map'
import Plane,{selfPlaneInfo} from '../components/Plane'
import EnemyPlane,{enemyPlaneInfo} from "../components/EnemyPlane";
import planeImg from "../assets/plane.png";
import {game} from '../game' //这里要解构才能拿到数据
import {hitTestObject} from '../utils/index'
import Bullet,{enemyBulletInfo,selfBulletInfo} from "../components/Bullet";
import {useKeyboardMove} from "../utils/useKeyboardMove"



export default defineComponent({
setup(props, {emit}){

    //我放飞机
    const { planeInfo } = UsePlaneInfo();
    //地方飞机
    const {enemyPlanes} = useCreateEnemyPlanes();
    //我方子弹
    const {bullets,addBullet} = useCreateBullets();
    //发射子弹
    const onAttack1 =(bulletInfo)=>{
        //添加子弹
        addBullet(bulletInfo)
    }
    //敌方子弹
    const {
        EnemyBullets,
        createPlaneBullet
    } = useEnemyPlaneBullets()

    //战斗逻辑也封装圈起来
    useFighting(enemyPlanes,bullets,planeInfo,emit,EnemyBullets);

    return{
        planeInfo,
        enemyPlanes,
        bullets,
        onAttack1,
        EnemyBullets,
        createPlaneBullet,
        addBullet
    }
},
    render(ctx){
    //创建敌方飞机
        const createEnemyPlanes =()=>{
            return ctx.enemyPlanes.map((info)=>{
                return h(EnemyPlane,{
                    x:info.x,
                    y:info.y,
                    dir:info.dir,
                    width:info.width,
                    height:info.height,
                    onAttack({x,y}){
                    ctx.createPlaneBullet(x,y)
                    }})
            })
        }
     //创建敌方子弹
        const createEnemybulletts =()=>{
            return ctx.EnemyBullets.map((enemyBulletInfo)=>{
                return h(Bullet,{x:enemyBulletInfo.x,y:enemyBulletInfo.y,
                    dir:enemyBulletInfo.dir})
            })
        }
    //创建我方子弹
        const createBullets = () =>{
            return ctx.bullets.map((bulletsInfo)=>{
                return h(Bullet,{x:bulletsInfo.x,y:bulletsInfo.y,
                    dir:bulletsInfo.dir})
            })

        }

        //背景图片
        return h('Container',[
            h(Map),
            h(Plane,
                {
                    x:ctx.planeInfo.x,
                    y:ctx.planeInfo.y,
                    onAttack:ctx.onAttack1
                }), //在这里接收子组件发送过来的事件
            ...createEnemyPlanes(),
            ...createBullets(),
            ...createEnemybulletts()
        ])
    }
})

//抽离成函数
function UsePlaneInfo(){
    const planeInfo = reactive({x:150,y:450,width:258,height:364})

    const speed = 15
    const { x: selfPlaneX, y: selfPlaneY } = useKeyboardMove({
        x: planeInfo.x,
        y: planeInfo.y,
        speed: speed,
    });
    /*window.addEventListener('keydown',(e)=>{
        switch (e.code){
            case 'ArrowUp':
                planeInfo.y -=speed;
                break;
            case 'ArrowDown':
                planeInfo.y +=speed;
                break;
            case 'ArrowLeft':
                planeInfo.x -=speed;
                break;
            case 'ArrowRight':
                planeInfo.x +=speed;
                break;
        }
    })*/
    planeInfo.x = selfPlaneX;
    planeInfo.y = selfPlaneY;
    return {planeInfo}
}

function useCreateEnemyPlanes(){
    const createEnemyPlanes = (x)=>{
        return{
            x,
            y:-200,
            width:enemyPlaneInfo.width,
            height:enemyPlaneInfo.height,
            life:enemyPlaneInfo.life
        };
    };
    const enemyPlanes  = reactive([])
    setInterval(()=>{
        const x = Math.floor(308-308*Math.random());
        enemyPlanes.push(createEnemyPlanes(x))
    },3000)
    //const enemyPlanes=reactive([{x:308-308*Math.random(),y:0,width:308,height:207}]);
    return {
        enemyPlanes
    }
}
//子弹重构
function useCreateBullets(){
   const bullets = reactive([
        {
            x:50,
            y:50,
        }
    ])

    //添加子弹ye放在这里 return出去就可以用了
    const addBullet = (info)=>{
        const width = selfBulletInfo.width;
        const height = selfBulletInfo.height;
        //const rotation = selfBulletInfo.rotation;
        const dir = selfBulletInfo.dir;

       bullets.push({...info,width,height,dir})
        console.log(bullets);
    }

    return {bullets,addBullet}
}
//创建敌方子弹
function useEnemyPlaneBullets(){
    const EnemyBullets =reactive([])
    const createPlaneBullet =(x,y)=>{
        const width = enemyBulletInfo.width;
        const height = enemyBulletInfo.height;
        const rotation = enemyBulletInfo.rotation;
        const dir = enemyBulletInfo.dir;

        EnemyBullets.push({x,y,width,height,dir})
        //console.log(EnemyBullets);
    }

    return { EnemyBullets,createPlaneBullet }
}

//战斗逻辑
function useFighting(enemyPlanes,bullets,planeInfo,emit,EnemyBullets){

    const handleTicker=()=>{
        //主循环
        //敌方飞机移动
        enemyPlanes.forEach((enemyInfo)=>{
            enemyInfo.y++
            //enemyInfo.x++
        })
        //移动我方子弹
        bullets.forEach((bulletInfo)=>{
            bulletInfo.y--;
        })
        //移动敌方子弹
        EnemyBullets.forEach((enemyBulletInfo)=>{
            enemyBulletInfo.y++;
        })
        //碰撞检测，矩形
        enemyPlanes.forEach((enemyInfo)=>{
            if (hitTestObject(enemyInfo,planeInfo)){
                emit('changePage','StartPage')
            }
        });

        //我方子弹和敌方飞机的碰撞检测
        bullets.forEach((bulletInfo,bulletIndex)=>{
            enemyPlanes.forEach((enemyInfo,enemyIndex)=>{
                if (hitTestObject(enemyInfo,bulletInfo)){
                    bullets.splice(bulletIndex,1)
                    enemyPlanes.splice(enemyIndex,1)
                }
            });

        });
        bullets.forEach((bulletInfo,bulletIndex)=>{

            EnemyBullets.forEach((enemyBulletInfo,enemyBulletIndex)=>{
                if (hitTestObject(enemyBulletInfo,bulletInfo)){
                    bullets.splice(bulletIndex,1)
                    EnemyBullets.splice(enemyBulletIndex,1)
                }
            });

        });
    }

    onMounted(()=>{
        game.ticker.add(handleTicker)
    })
    onUnmounted(()=>{
        game.ticker.remove(handleTicker)
    })
}